﻿<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>微信墙</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <META HTTP-EQUIV="Pragma" CONTENT="no-cache"> 
        <META HTTP-EQUIV="Cache-Control" CONTENT="no-cache"> 
        <META HTTP-EQUIV="Expires" CONTENT="0"> 
        <!-- CSS -->
        <link rel="stylesheet" href="lib/css/supersized.css">
        <script type='text/javascript' src='http://ajax.useso.com/ajax/libs/jquery/1.7.2/jquery.min.js?ver=3.4.2'></script>
        <script src="lib/js/supersized.3.2.7.min.js"></script>
        <script src="lib/js/supersized-init.js"></script>
        <script type="text/javascript">
        $(document).ready(function(){
            

            /* ajax获取旧数据 */
            $.ajax({
                type: "GET",
                url: "GetOldData.php",
                cache: false,
                dataType: "json",
                success: function(data)
                {
                    // console.log(data);
                    // console.log(data.length);
                    for(var i = 0; i < data.length; i++)
                    {
                        var id = data.length - data[i].wx_wall_id;
                        var oldWords = '<div class="box" id="box">' + '<img class="head" src="' + data[i].wx_wall_headimg + '" />' + '<div class="name">' + data[i].wx_wall_name + '</div>' + '<div class="date">' + data[i].wx_wall_date + '</div>' + '<div class="text">' + data[i].wx_wall_text + '</div></div>';
                        // console.log(oldWords);
                        $("#old").prepend(oldWords);
                    }
                }

            })

            

            /* ajax长轮询获取新数据 */
            function get_new_data()
            {
                $.ajax({
                    type: "POST",
                    url: "GetNewData.php",
                    cache: false,
                    dataType: "json",
                    success: function(data)
                    {
                        var newWords = '<div style="display:none" class="box" id="box">' + '<img class="head" src="' + data[0].wx_wall_headimg + '" />' + '<div class="name">' + data[0].wx_wall_name + '</div>' + '<div class="date">' + data[0].wx_wall_date + '</div>' + '<div class="text">' + data[0].wx_wall_text + '</div></div>';
                        // var newWords = '<div class="box" id="' + data[0].wx_wall_id +'">' + '<img class="head" src="' + data[0].wx_wall_headimg + '" />' + '<div class="name">' + data[0].wx_wall_name + '</div>' + '<div class="date">' + data[0].wx_wall_date + '</div>' + '<div class="text">' + data[0].wx_wall_text + '</div></div>';

                        $("#old").prepend(newWords);
                        $("#box").fadeIn(1500);
                        
                        get_new_data();
                    }
                })
            }

            get_new_data();
            
        });
        </script>
        <style type="text/css">

        .content{
            margin: 0px auto;
            margin-top: 180px;
            width: 90%;
        }

        /*.box{
            background: #fff;
            border-radius: 10px;
            max-height: 150px;
            position: absolute;
            width: 95%;
            margin: 0 auto;
            margin-bottom: 20px;
        }*/

        .box{
            background: #fff;
            border-radius: 10px;
            max-height: 150px;
            width: 90%;
            margin: 0 auto;
            margin-bottom: 20px;
        }

        .old{

        }

        .new{

        }

        .head{
            width: 100px;
            height: 100px;
            border-radius: 50%;
            box-shadow: 1px 1px 1px #888888;
            position: relative;
            top: 25px;
            left: 25px;
        }

        .name{
            font-size: 26px;
            font-family: 微软雅黑;
            font-weight: bold;
            text-shadow: 1px 1px 1px #888888;
            position: relative;
            left: 155px;
            top: -80px;
        }

        .date{
            font-family: 微软雅黑;
            font-size: 20px;
            text-shadow: 1px 1px 1px #888888;
            color: rgb(105, 118, 118);
            position: relative;
            text-align: right;
            right: 25px;
            top: -110px;
        }

        .text{
            font-size: 40px;
            font-family: 楷体;
            text-shadow: 1px 1px 1px #888888;
            color: rgb(87, 15, 70);
            font-weight: bolder;
            position: relative;
            left: 155px;
            top: -85px;
        }

      </style>
    </head>
    <body style="overflow-x:hidden;">
    <div class="content" id="content">
        <div class="new" id="new">
        </div>
        <div class="old" id="old">
        </div>        
    </div>
    </body>
</html>

